<!DOCTYPE html>
<html>
    {% load static %}
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
<!--external css-->
<link href="{% static 'assets/font-awesome/css/font-awesome.css' %}" rel="stylesheet" />
    
<!-- Custom styles for this template -->
<link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
<link href="{% static 'assets/css/style-responsive.css' %}" rel="stylesheet">

<!-- js placed at the end of the document so the pages load faster -->
<script src="{% static 'assets/js/jquery.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script class="include" type="text/javascript" src="{% static 'assets/js/jquery.dcjqaccordion.2.7.js' %}"></script>
<script src="{% static 'assets/js/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.nicescroll.js' %}" type="text/javascript"></script>


<!--common script for all pages-->
<script src="{% static 'assets/js/common-scripts.js' %}"></script>

<!--script for this page-->

<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="{% static 'assets/js/echarts.js' %}"></script>
<script src="{% static 'assets/js/highlight.min.js' %}"></script>
    <script>
        hljs.highlightAll();
    </script>

    <script src="{% static 'assets/dist/notice.min.js' %}"></script>
    <script>
        const notice = new Notice();
    </script>

    <script src="{% static 'assets/js/main.js' %}"></script>
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'assets/dist/notice.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/default.min.css' %}">


    <body>
        <section id="main-content">
            <section class="wrapper">
                <h3><i class="fa fa-angle-right"></i> 查看或修改供应商信息
                </h3>
                <div class="row mt">
                  <div class="col-lg-12">
                  <div class="form-panel3">
                        
                      <form id='material1' class="form-horizontal style-form" method="get">
                          <!-- <div class="form-group"> -->
                              <!-- <label class="col-sm-2 col-sm-2 control-label">搜索</label> -->
                              <div class="col-sm-4">
                                  <input id="materialInput1" name='pk' type="text" class="form-control" placeholder="请输入供应商编号" required>
                              </div>
                              <button type="submit" formmethod="post" class="btn btn-success "><i class="fa fa-search"></i></button>
                            </form>
                              
                              <div class="col-sm-12">
                              <button type="button" class="btn btn-link " data-toggle="modal" data-target="#myModal1">忘记编号？</button>
  



                                      <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                                          <div class="modal-dialog">
                                            <div class="modal-content">
                                              <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title" id="myModalLabel">搜索供应商编号</h4>
                                              </div>
                                              <div class="modal-body">
                                                <!-- Hi there, I am a Modal Example for Dashgum Admin Panel. -->
                                                <!-- 搜索条件 -->
                                                <form  id="material2" class="form-horizontal style-form">
                                                  <div class="form-group">
                                                      <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                      <label class="col-sm-4 col-sm-4 control-label">
                                                          <div class="pull-right">供应商名称：</div>
                                                          </label>
                                                      <div class="col-sm-5">
                                                          <input name="vname" id="vname" type="text" class="form-control">
                                                      </div>
                                                      
                                                  </div>
                                                  <div class="form-group">
                                                      <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                      <label class="col-sm-4 col-sm-4 control-label">
                                                          <div class="pull-right">所在城市：</div>
                                                          </label>
                                                      <div class="col-sm-5">
                                                          <input name="city" id="city" type="text" class="form-control">
                                                      </div>
                                                      
                                                  </div>
                                                  <div class="form-group">
                                                      <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                      <label class="col-sm-4 col-sm-4 control-label">
                                                          <div class="pull-right">创建者编号：</div>
                                                          </label>
                                                      <div class="col-sm-5">
                                                          <input name="uid" id="uid" type="text" class="form-control">
                                                      </div>
                                                      
                                                  </div>
                                                  <div class="form-group">
                                                      <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                      <label class="col-sm-4 col-sm-4 control-label">
                                                          <div class="pull-right">国家：</div>
                                                          </label>
                                                      <div class="col-sm-5">
                                                        <select class="form-control"  name="country" id="country"></select>
                                                      </div>
                                                      
                                                  </div>
                                                  <div class="form-group">
                                                    <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                    <label class="col-sm-4 col-sm-4 control-label">
                                                        <div class="pull-right">公司编码：</div>
                                                        </label>
                                                    <div class="col-sm-5">
                                                        <select class="form-control"  name="company" id="company"></select>
                                                    </div>
                                                    <div class="col-sm-2">
                                                    <input type="submit"  class="btn btn-theme02">
                                                    </div>
                                                </div>

                                              </form>
                                              {% comment %} <h4> 供应商</h4> {% endcomment %}
                                              {% comment %} <hr> {% endcomment %}
                                              <table  class="table table-bordered table-striped table-condensed">
                                                *双击填入编号                                       
                                                <thead>
                                                <!-- 搜索编号返回的属性 style="width: 100px;"-->
                                                <tr>
                                                    <th> 供应商编号</th>
                                                    <th> 供应商名称</th>
                                                    <th> 所在城市</th>
                                                    <th> 公司编码</th>
                                                    <th> 创建者编号</th>
                                                </tr>
                                                </thead>
                                                <tbody id="searchDiv"></tbody>
                                            </table>
                                              

                                              </div>
                                              
                                              <div class="modal-footer">
                                                
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                              
                      
                  </div>
              </div>
              </div>

              <div style="display: none;" id='details'>  
              <div class="row mt">  
                  <div class="col-lg-12">
                    <div class="col-lg-12">
                      <div class="content-panel">
                      <h4 ><i class="fa fa-angle-right"></i> 供应商信息</h4>
                          <section id="unseen">
                            <form id="material3">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>基本信息</th>
                                        {% comment %} style="width: 500px;" {% endcomment %}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td >
                                            <label>供应商编号：</label>
                                            <label><input type="text" value=""  disabled id="vid2"></label>
                                        </td>
                                        <td >
                                            <label>供应商名称：</label>
                                            <label><input type="text" name="vname" id="vname2" required></label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>创建人编号：</label>
                                            <label><input type="text" value=""  disabled id="uid2"></label>
                                        </td>
                                        
                                    </tr>
                                    
                        
                            </table>

                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>联系方式</th>
                                       
                                    </tr>
                                    </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <label> 语言:
                                                </label>
                                            <label><select name="language" id='language2' required></select></label>
                                        </td>
                                        <td>
                                            <label> 电话:
                                                </label>
                                            <label> <input type="text" id='phone2'></label>
                                        </td>
                                        <td>
                                            <label> 传真：</label>
                                            <label><input type="text" id='fax2'></label>
                                        </td>
                                        
                                    </tr>
                                </tbody>
                            </table>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>所在地</th>
                                       
                                    </tr>
                                    </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <label> 国家：</label>
                                            <label><select name="country" id="country2" required></select></label>
                                        </td>
                                        <td>
                                            <label> 城市：</label>
                                            <label><input name="city" id="city2" type="text" required></label>
                                        </td>
                                        
                                    </tr>
                                    <tr>
                                        
                                        <td>
                                            <label> 街区地址：</label>
                                            <label><input name="address" id="address2" type="text" ></label>
                                        </td>
                                        <td>
                                            <label> 邮政编码：</label>
                                            <label><input name="postcode" id="postcode2" type="text" required></label>
                                        </td>
                                        
                                    </tr>
                                </tbody>
                            </table>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>交易</th>
                                       
                                    </tr>
                                    </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <label> 公司编码：</label>
                                            <label><select name="company" id="company2" required></select></label>
                                        </td>
                                        <td>
                                            <label> 
                                                采购组织：</label>
                                            <label><select name="pOrg" id="pOrg2" required></select></label>
                                        </td>
                                        
                                    </tr>
                                    <tr>
                                        
                                        <td>
                                            <label> 
                                                支付类型：</label>
                                            <label><select name="tpType" id="tpType2"></select></label>
                                        </td>
                                        <td>
                                            <label> 
                                                交易货币：</label>
                                            <label><select name="currency" id="currency2"></select></label>
                                        </td>
                                        
                                    </tr>
                                    <tr>
                                        
                                        <td>
                                            <label> 
                                                总账账户编码：</label>
                                            <label><input name="glAcount" id="glAcount2" type="text" required></label>
                                        </td>
                                        
                                    </tr>
                                </tbody>
                            </table>
                            <div class="col-sm-9"></div>
                            <button  class="btn btn-danger btn-xs" type="reset" >重置</button>
                            <div class="col-sm-2"></div>
                            <button class="btn btn-primary btn-xs" type="submit" formmethod="post" onclick="return tip()">提交</button>
                        </form>

                                    
                          </section>
                    </div><!-- /content-panel -->
                </div>
                </div><!-- /col-md-12 -->
                </div><!-- /row -->
            </div>
  
          </section>
        </section><!-- /MAIN CONTENT -->
  
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                2014 - Alvarez.is
                <a href="basic_table.html#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </section>

        {% comment %} <textarea id="item_result"></textarea> {% endcomment %}

        <script>
            //编号搜索 
            $('#material1').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_search_vendor' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        pk: $("#materialInput1").val(),
                    },
                    success: function(data) {
                        $('#item_result').text(data);
                        var dataObj = eval("("+data+")");

                        if(dataObj.status==1){
                            showMessage({text: dataObj.message ,type: 'success'});
                            fields = dataObj.vendor
                            $("#vid2").val(fields.vid);
                            $("#uid2").val(fields.euser);
                            $("#vname2").val(fields.vname);
                            $("#city2").val(fields.city);
                            $("#address2").val(fields.address);
                            $("#postcode2").val(fields.postcode);
                            $("#country2").val(fields.country);
                            $("#language2").val(fields.language);
                            $("#glAcount2").val(fields.glAcount);
                            $("#phone2").val(fields.phone);
                            $("#fax2").val(fields.fax);
                            $("#tpType2").val(fields.tpType);
                            $("#company2").val(fields.companyCode);
                            $("#pOrg2").val(fields.pOrg);
                            $("#currency2").val(fields.currency);
                            document.getElementById("details").style.display="";//显示
                        }else{
                            showMessage({text: dataObj.message ,type: 'error'});
                        }
                        
                       
                    },
                    failure: function() {

                    }
                })
            });

            //其他搜索
            $('#material2').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_search_vendor' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        vname: $("#vname").val(),
                        city: $("#city").val(),
                        country: $("#country").val(),
                        companyCode: $("#company").val(),
                        uid: $("#uid").val(),
                    },
                    success: function(data) {
                        $('#item_result').text(data);
                        var dataObj = eval("("+data+")");
                        var out = "";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            fields = dataObj[i].fields
                            out += '<tr><td>'+ dataObj[i].pk+ '</td><td>' + fields.vname+ '</td><td>' + fields.city+ '</td><td>' + fields.country+ '</td><td>'+ fields.euser+ '</td><tr>';
                        }
                        document.getElementById("searchDiv").innerHTML=out;
                    },
                    failure: function() {

                    }
                })
            });

            //双击行 信息进入“搜索商品条件”三个框
            $("table").on("dblclick","tr",function(e){
                document.getElementById("materialInput1").value=$(this).find('td').eq(0).text();
                $('#myModal1').modal('hide');
            });

            //提交修改信息 必填的值如果为空，则不提交，并返回错误提示：请填写xxx（第一个未填的项），必填项见word/微信发的图；提交成功后，返回提示：商品信息已更新
            //0-> fail; 1->succeed; {'status':1, 'message':"xxx", 'fields':[xxx,xxx]}
            $('#material3').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_update_vendor' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        vid: $("#vid2").val(),
                        uid: $("#uid2").val(),
                        vname: $("#vname2").val(),
                        city: $("#city2").val(),
                        address: $("#address2").val(),
                        postcode: $("#postcode2").val(),
                        country: $("#country2").val(),
                        language: $("#language2").val(),
                        glAcount: $("#glAcount2").val(),
                        phone: $("#phone2").val(),
                        fax: $("#fax2").val(),
                        tpType: $("#tpType2").val(),
                        companyCode: $("#company2").val(),
                        pOrg: $("#pOrg2").val(),
                        currency: $("#currency2").val(),
                        //输入供应商修改信息，这个是商品的没改，可根据id自行修改
                    },
                    success: function(data) {
                        $('#item_result').text(data);
                        var dataObj = eval("("+data+")");
                        if(dataObj.status==1){
                            showMessage({text: dataObj.message ,type: 'success'});
                        }else{
                            showMessage({text: dataObj.message ,type: 'error'});
                        }
                        //0-> fail; 1->succeed; {'status':1, 'message':"xxx", 'fields':[xxx,xxx]}
                        //根据status写。。。
                    },
                    failure: function() {

                    }
                })
            });
        </script>

        <!-- 确认提示 -->
        <script>
            function tip(){
                if(confirm("您确认修改吗？")){
                return true;
                }
                else{
                return false;
                }
            } 
        </script>

        <!-- 下拉框ajax -->
        <script>
            

            $(document).ready(function () {
                $.ajax({
                    type: "get",
                    url: "{% url 'MM:ajax_load_language' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success: function(data) {
                        var dataObj = eval("("+data+")");
                        var out = "<option value='' >请选择语言</option>";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            out += '<option value=' + dataObj[i].Language+'>'+ dataObj[i].Language + '--' + dataObj[i].Name + '</option>' ;
                        }
                        var items=document.getElementsByName("language");
                        for(i = 0; i < items.length; i++) {
                            items[i].innerHTML=out;
                        }
                    },
                    failure: function() {

                    }
                });
                $.ajax({
                    type: "post",
                    url: "{% url 'MM:ajax_load_tptype' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success: function(data) {
                        var dataObj = eval("("+data+")");
                        var out = "<option value='' >请选择支付类型</option>";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            out += '<option value=' + dataObj[i].Tptype+'>'+ dataObj[i].Tptype + '--' + dataObj[i].Description + '</option>' ;
                        }
                        var items=document.getElementsByName("tpType");
                        for(i = 0; i < items.length; i++) {
                            items[i].innerHTML=out;
                        }
                    },
                    failure: function() {

                    }
                });
                $.ajax({
                    type: "post",
                    url: "{% url 'MM:ajax_load_currency' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success: function(data) {
                        var dataObj = eval("("+data+")");
                        var out = "<option value='' >请选择交易货币</option>";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            out += '<option value=' + dataObj[i].Currency+'>'+ dataObj[i].Currency + '--' + dataObj[i].Name + '</option>' ;
                        }
                        var items=document.getElementsByName("currency");
                        for(i = 0; i < items.length; i++) {
                            items[i].innerHTML=out;
                        }
                    },
                    failure: function() {

                    }
                });
                $.ajax({
                    type: "post",
                    url: "{% url 'MM:ajax_load_country' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success: function(data) {
                        var dataObj = eval("("+data+")");
                        var out = "<option value='' >请选择国家</option>";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            out += '<option value=' + dataObj[i].Country+'>'+ dataObj[i].ChineseName + '--' + dataObj[i].EnglishName + '</option>' ;
                        }
                        var items=document.getElementsByName("country");
                        for(i = 0; i < items.length; i++) {
                            items[i].innerHTML=out;
                        }
                            
                        },
                    failure: function() {

                    }
                });
                $.ajax({
                    type: "post",
                    url: "{% url 'MM:ajax_load_plant' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success: function(data) {
                        var dataObj = eval("("+data+")");
                        var out = "<option value='' >请选择工厂</option>";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            out += '<option value=' + dataObj[i].Plant+'>'+ dataObj[i].Plant + '--' + dataObj[i].Name + '</option>' ;
                        }
                        //由于一个页面里有多个表单，所以用name寻找各个下拉框进行赋值
                        var items=document.getElementsByName("plant");
                        for(i = 0; i < items.length; i++) {
                            items[i].innerHTML=out;
                        }
                    },
                    failure: function() {

                    }
                });
                $.ajax({
                    type: "post",
                    url: "{% url 'MM:ajax_load_porg' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success: function(data) {
                        var dataObj = eval("("+data+")");
                        var out = "<option value='' >请选择采购组织</option>";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            out += '<option value=' + dataObj[i].Porg+'>'+ dataObj[i].Porg + '--' + dataObj[i].Name + '</option>' ;
                        }
                        var items=document.getElementsByName("pOrg");
                        for(i = 0; i < items.length; i++) {
                            items[i].innerHTML=out;
                        } 
                    },
                    failure: function() {

                    }
                });
                $.ajax({
                    type: "post",
                    url: "{% url 'MM:ajax_load_company' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success: function(data) {
                        var dataObj = eval("("+data+")");
                        var out = "<option value='' >请选择公司编码</option>";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            out += '<option value=' + dataObj[i].CompanyCode+'>'+ dataObj[i].CompanyCode + '--' + dataObj[i].Name + '</option>' ;
                        }
                        var items=document.getElementsByName("company");
                        for(i = 0; i < items.length; i++) {
                            items[i].innerHTML=out;
                        } 
                    },
                    failure: function() {

                    }
                });
            });
        </script>
    </body>
</html>